import React from 'react';
import { Button, message, Form, Input } from 'antd';
import {useNavigate} from 'react-router-dom';
import '../assets/styles/login.css';
export default function Login(){
	const navigate = useNavigate();
    const onFinish = (values) => {
	  console.log('Success:', values);
	  fetch("http://jacklv.cn/users/login", {
	    method: "post",
	    body: JSON.stringify(values),
	    headers: {
	      "Content-Type": "application/json"
	    }
	  })
	    .then(response => {
	      return response.json();
	    })
	    .then(res => {
	      console.log('res', res)
	      if(res.code == 1){
	        const {token,userInfo,permissions} = res.data;
	        message.success(res.msg || "登录成功");
	        localStorage.token = token;
	        localStorage.userInfo = JSON.stringify(userInfo);
	        localStorage.permissions = JSON.stringify(permissions);
	        navigate("/nav");
	      }else{
	        message.error(res.msg || "账号或密码错误")
	      }
	    })
	    .catch(err=>{
	      console.log("err",err);
	    })
	};
	
	const onFinishFailed = (errorInfo) => {
	  console.log('Failed:', errorInfo);
	};
	return (<div className="bg"><Form
	  name="basic"
	  labelCol={{ span: 8 }}
	  wrapperCol={{ span: 16 }}
	  style={{ Width: 400 }}
	  initialValues={{ remember: true }}
	  onFinish={onFinish}
	  onFinishFailed={onFinishFailed}
	  autoComplete="off"
	>
	  <Form.Item
	    label={<div style={{color:'white'}}>用户名</div>}
	    name="account"
	    rules={[{ required: true, message: '请输入账户名!' }]}
	  >
	    <Input placeholder="请输入账户名"/>
	  </Form.Item>
	
	  <Form.Item
	    label={<div style={{color:'white'}}>密码</div>}
	    name="password"
	    rules={[{ required: true, message: '请输入密码!' }]}
	  >
	    <Input.Password />
	  </Form.Item>
	
	  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
	    <Button type="primary" htmlType="submit">
	      登录
	    </Button>
	  </Form.Item>
	</Form></div>)
}
